<template>
  <div class="home">
    <div class="top-container">
      <value-container title="订单金额(元)" :value="26895"></value-container>
      <value-container title="APP用户数" :value="1314"></value-container>
      <value-container title="会员个数" :value="530"></value-container>
      <value-container title="服务人数" :value="206478"></value-container>
      <value-container title="举办赛事" :value="26"></value-container>
      <value-container title="总设备数" :value="137"></value-container>
      <value-container title="总警告数" :value="13"></value-container>
      <value-container title="设备异常数" :value="26"></value-container>
    </div>
    <div class="main-container">
      <iframe
        class="iframe"
        border="0"
        src="http://www.thingjs.com/p/44dd0e233a95d1ed16b628e5"
      ></iframe>
    </div>
    <div class="bottom-container">
      <div class="value-wrap first">
        <div class="title-value-container">
          <div class="title-text-container">
            <img class="title-icon" src="@/assets/images/icon@2x.png" alt="" />
            运动人数分析
          </div>
        </div>
        <div class="content-container" id="chart1"></div>
      </div>
      <div class="value-wrap end">
        <div class="title-value-container">
          <div class="title-text-container">
            <img class="title-icon" src="@/assets/images/icon@2x.png" alt="" />
            人员进出对比
          </div>
        </div>
        <div class="content-container" id="chart2"></div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import valueContainer from "@/components/value-container.vue";
var echarts = require("echarts");

export default {
  components: {
    valueContainer
  },
  data() {
    return {
      option1: {
        legend: {
          type: "plain",
          textStyle: {
            color: "#fff"
          }
        },
        textStyle: {
          color: "#fff"
        },
        tooltip: {},
        xAxis: {
          data: ["10.1", "10.2", "10.3", "10.4", "10.5", "10.6"]
        },
        yAxis: {},
        series: [
          {
            name: "运动员",
            type: "line",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
      option2: {
        legend: {
          type: "plain",
          textStyle: {
            color: "#fff"
          },
          data: ["男性", "女性"]
        },
        tooltip: {
          trigger: "axis"
        },
        textStyle: {
          color: "#fff"
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ["line", "bar"]
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "男性",
            type: "bar",
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ],
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值"
                },
                {
                  type: "min",
                  name: "最小值"
                }
              ]
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值"
                }
              ]
            }
          },
          {
            name: "女性",
            type: "bar",
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3
            ],
            markPoint: {
              data: [
                {
                  name: "年最高",
                  value: 182.2,
                  xAxis: 7,
                  yAxis: 183
                },
                {
                  name: "年最低",
                  value: 2.3,
                  xAxis: 11,
                  yAxis: 3
                }
              ]
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值"
                }
              ]
            }
          }
        ]
      }
    };
  },
  created() {
    window.addEventListener(
      "message",
      function() {
        // if (e.data && e.data.from) {
        //   var data = e.data;
        //   var funcName = data.funcName;
        //   var param = data.param;
        // }
        // 调用 ThingJS 页面方法
      },
      true
    );
  },
  methods: {
    goVenue() {
      window.frames[0].postMessage("message from parentwindow", "*");
    },
    setChart1() {
      var myChart = echarts.init(document.getElementById("chart1"));
      myChart.setOption(this.option1);
    },
    setChart2() {
      var myChart = echarts.init(document.getElementById("chart2"));
      myChart.setOption(this.option2);
    }
  },
  mounted() {
    this.setChart1();
    this.setChart2();
  }
};
</script>
<style lang="less" scoped>
.home {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #020408;

  .top-container {
    width: 99%;
    height: 138px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
    background: #020408;
  }

  .main-container {
    width: 99%;
    height: 612px;
    margin: 10px auto;

    iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }
  }

  .bottom-container {
    width: 99%;
    margin: 0 auto;
    height: 303px;
    display: grid;
    grid-template-columns: 49.5% 49.5%;

    .end {
      position: relative;
      left: 1%;
    }

    .value-wrap {
      width: 100%;
      height: 100%;
      background: url("../../../assets/images/screen1-value-background.png");
      background-size: 100% 100%;

      .title-value-container {
        width: 100%;
        display: grid;
        grid-template-columns: 50% 50%;
        height: 60px;
        border-bottom: 1px dotted #fff;

        .title-text-container {
          font-size: 22px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(226, 226, 226, 1);
          text-align: left;
          line-height: 60px;

          img {
            position: relative;
            top: 3px;
          }
        }

        p {
          font-size: 22px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(226, 226, 226, 1);
          text-align: right;
          line-height: 60px;
          margin: 0;
        }
      }

      .content-container {
        height: 200px;
        width: 100%;
      }
    }
  }
}

.title-icon {
  width: 26px;
  height: 26px;
  margin-left: 1%;
}
</style>
